<template>
  <div class="w-100 h-100 position-relative">
    <div class="gis-container overflow-hidden" v-if="showRouter">
      <iframe
        name="gis"
        class="w-100 h-100 position-relative iframe-a"
        @load="iframeLoaded"
        :src="`/Gis/${iframeUrl}.html`"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
      ></iframe>

      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 引入 gis方法
// import {
//   getGridBoundary,
//   getLonAndAz,
// } from '@/utils/gisObjFun.js'

import { getDictionary } from '@/apis/gis'
import { mapState, createNamespacedHelpers } from 'vuex'

const { mapState: mapStateHome } = createNamespacedHelpers('home')
const {
  mapState: mapStateGis,
  mapMutations: mapMutationsGis,
  mapActions: mapActionsGis
} = createNamespacedHelpers('gisPage')
import { delGisData } from '@/utils/gisObjFun.js'
var gisObjTest = null
const { mapActions: mapActionsForm } = createNamespacedHelpers('gisForm')
export default {
  name: 'gisPage',
  components: {},
  data: () => ({
    showRouter: true, //用于刷新路由组件
    showIframe: false,

    formQuery: null //用来保存$route的query
  }),
  computed: {
    ...mapState(['gisForm']),
    ...mapStateHome(['userInfoVo']),
    ...mapStateGis([
      'gisObj', //地图对象
      'dictionary',
      'iframeUrl', //地图地址
      'boundaryList' //存储边界值值，缓存
    ])
  },
  watch: {
    $route(to, from) {
      // console.log(to, from)
      let routeList = [
        '/gisPage/user',
        '/gisPage/thematic-research',
        '/gisPage/network',
        '/gisPage/changjing'
      ]

      if (to.path == '/gisPage/healthCheck') {
        // this.$store.commit( 'gisForm/setRouteType', null );
        let iframeUrl =
          this.gisForm.perspective == 1 ? 'sitePositionOffset' : 'cellAzOffset'
        this.setIframeUrl(iframeUrl)
      } else if (
        routeList.includes(to.path) ||
        (to.path == '/gisPage/shangji' && this.iframeUrl !== 'index')
      ) {
        this.setIframeUrl('index')
      }
    },
    'gisForm.goBackType'(nv) {
      this.iframeLoaded()
    }
  },
  created() {
    console.log(this.userInfoVo)
    // 初始化判定 地图
    this.setIframeUrl('index')
    if (this.$route.path == '/gisPage/healthCheck') {
      //如果是健康检查
      let iframeUrl =
        this.gisForm.perspective == 1 ? 'sitePositionOffset' : 'cellAzOffset'
      this.setIframeUrl(iframeUrl)
    }
    // 获取行政区
    this.getDictionary()

    if (this.$root.form) {
      console.log(this.$root.form)
      this.formQuery = this.$root.form
    } else {
      this.formQuery = null
      // 清除之前可能存在的 keyword
      this.$store.commit('gisForm/setKeyWord', { keyWord: null })
    }
  },
  // created() {
  //   // 初始化判定 地图
  //   if (this.$route.path == '/gisPage/healthCheck') {
  //     //如果是健康检查
  //     let iframeUrl =
  //       this.gisForm.perspective == 1 ? 'sitePositionOffset' : 'cellAzOffset'
  //     this.setIframeUrl(iframeUrl)
  //     // } else if (this.$route.path == '/gisPage/thematic-research') {
  //     //   this.setIframeUrl('sitePositionOffset')
  //   } else {
  //     this.setIframeUrl('index')
  //   }
  //   // 获取行政区
  //   this.getDictionary()

  //   if (this.$root.form) {
  //     console.log(this.$root.form)
  //     this.formQuery = this.$root.form
  //   } else {
  //     this.formQuery = null
  //     // 清除之前可能存在的 keyword
  //     this.$store.commit('gisForm/setKeyWord', { keyWord: null })
  //   }
  // },
  methods: {
    ...mapMutationsGis(['setGisObj', 'setDictionary', 'setIframeUrl']),
    ...mapActionsGis(['changeBoundaryList']),
    ...mapActionsForm(['initBoundary', 'initLonAndAz']),
    // 获取 行政区列表
    async getDictionary() {
      const { cityId = '' } = this.userInfoVo
      const { data = [] } =
        cityId &&
        (await getDictionary({
          cityId
        }))
      this.setDictionary(data)
      // 解决 iframe加载完成 地图无数据无法定位行政区的问题
      this.showIframe = true

      console.log('地图初始化：', cityId, data)
    },
    // iframe 加载完成
    iframeLoaded() {
      console.log('地图加载')
      //TODO 获取网格展示大小
      console.log(this.userInfoVo)
      const _this = this

      //50就是50*50,100就是100*100
      var gridWidth = this.userInfoVo.gridType ? this.userInfoVo.gridType : 50
      gis.window.initMap({
        onLoad: _this.mapLoaded,
        // 经纬度 点击 后返回
        siteClicked: function (id) {
          // alert('经纬度 点击 后返回');
          _this.$store.commit('gisForm/setCId', { data: id, jumpMap: false })
        }, //方位角 点击地图返回
        cellClicked: function (id) {
          // alert('经纬度 点击地图返回');
          _this.$store.commit('gisForm/setCId', { data: id, jumpMap: false })
        }, //区域 点击地图返回
        areaClicked: function (id, e) {
          // alert('区域 点击地图返回');
          // 判断id
          if (id.split('_').length > 1) {
            // 暂且判断成网路覆盖列表id
            _this.$store.commit('gisForm/setOffsetCId', {
              data: id,
              jumpMap: false
            })
          } else {
            // alert('区域 点击地图返回 其他的为筛选列表');
            const { routeAreaType, filterList } = _this.gisForm
            const flag = routeAreaType == 5 ? true : false
            // 其他的为筛选列表
            if (flag) {
              _this.$store.commit('gisForm/setZoneId', {
                data: id.slice(0, 6),
                flag: true,
                townId: id,
                getBoundary: false
              })
              _this.$store.commit('gisForm/setTownId', {
                data: id
              })

              _this.$store.commit('gisForm/setIndicatorType', id)
              _this.$store.commit('gisForm/setAllBoundaryType', null)
              // 把当前选中对象 设置好
              let item = filterList.find(v => v.id == id)
              // 传递当前选中项
              _this.$store.commit('gisForm/setUserLineDetails', item)
            }
            _this.$store.commit('gisForm/setUserLineId', {
              data: id,
              jumpMap: flag,
              jumpType: flag
            })
          }
          console.log(id, e)
        },
        gridWidth: gridWidth
      })

      console.log(this)
    },

    mapLoaded(obj) {
      this.setGisObj(obj)
      // console.log(obj)
      gisObjTest = obj
      if (this.dictionary.length !== 0) {
        // 跳转当前城市定位
        let item = this.dictionary.find(v => v.id == this.userInfoVo.cityId)
        if (item) this.gisObj.setBoundary(item)
      }

      if (this.iframeUrl != 'index') {
        this.initLonAndAz()
      } else {
        this.initBoundary()
      }

      // 调用报告跳转地图方法
      this.showReportInfo()

      // 地图加载完成
      this.$store.commit('gisPage/setGisMapMounted', true)
      this.$store.commit('gisForm/setUserLineId', {
        data: this.userInfoVo.cityId,
        jumpMap: true,
        ifNav: true,
        navItem: {
          id: this.userInfoVo.cityId,
          label: 'cityId',
          name: this.userInfoVo.cityName
        }
      })
    },

    // 报告跳转地图的方法
    showReportInfo() {
      if (this.formQuery && this.iframeUrl == 'index') {
        let formQuery = this.formQuery
        let typeIdList = [
          'zoneId',
          'townId',
          'areaId',
          'companyName',
          'networkGridId',
          'microGridId'
        ]
        this.$store.commit('gisForm/setKeyWord', {
          keyWord: formQuery.keyWord,
          setSearchListToId: formQuery[typeIdList[formQuery.type - 1]]
        })
        this.formQuery = null
        this.$root.form = null
      }
    }
  }
}
</script>
